<template>
	<div class="vant-table">
		<table cellspacing="0" :style="bgcolor" style="width: 100%" class="table">
			<div class="tr">
				<div class="th" v-for="(item, index) in column" :key="index" :style="{ width: item.width }">
					{{ item.label }}
				</div>
			</div>
			<div v-for="(item, index) in tableData" :key="index" class="list-tr tr">
				<div v-for="(context, i) in column" :key="i" class="td" :style="{ width: context.width }">
					<template v-if="context.prop == 'staff_name'">
						<div style="display: flex; align-items: center">
							<!--							<van-image class="img" v-if="index < 20" :src="dAvator" width="0.533rem" border-radius="50%"></van-image>-->
							<van-image width="0.533rem" border-radius="50%" class="img" :src="avator"></van-image>
							<span class="ellip">{{ item[context.prop] }}</span>
						</div>
					</template>
					<template v-else>{{ item[context.prop] }}</template>
				</div>
			</div>
		</table>
	</div>
</template>
<script>
	export default {
		props: {
			bgcolor: Object,
			tableData: Array,
			column: Array
		},
		created() {},
		data() {
			return {
				avator: new URL('@/assets/images/avatar.png', import.meta.url).href,
				dAvator: new URL('@/assets/images/default-avatar.svg', import.meta.url).href
			}
		}
	}
</script>

<style lang="less" scoped>
	.vant-table {
		.table {
			.th {
				height: 0.853333rem;
				background: #f0f2f5;
				border-radius: 0px 0.106667rem 0px 0px;
				font-size: 0.373333rem;
				font-weight: 400;
				color: #14161a;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.list-tr {
				background-color: #fff;
				font-size: 0.373333rem;
				font-weight: 400;
				color: #666666;
				display: flex;
				align-items: center;
				line-height: 0.853333rem;
				td {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-bottom: 0.026667rem solid #ebeff5;
				}
			}
			.tr {
				display: flex;
				align-items: center;

				.td:first-child,
				.th:first-child {
					padding-left: 0.32rem;
				}
				.td:last-child,
				.th:last-child {
					padding-right: 0.32rem;
				}
			}
			th,
			td {
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
	.img {
		width: 0.533rem;
		height: 0.533rem;
		border-radius: 50%;
		margin-right: 5px;
	}
	.ellip {
		width: 80%;
	}
</style>
